<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>安平通行码</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./layui/css/layui.css" media="all">
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>
<style>
    * {
        background: #F2F6FB;
    }

    .layui-text {
        background: #D7E8FF;
        line-height: 16px;
        color: #265DA4;
        font-weight: bolder;
        font-size: 16px;
    }

    .layui-input,
    .layui-textarea {
        width: 95%;
        background: #E9F1FB;
        border-color: #E9F1FB;
        border-radius: 4px;
        box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.2);
        ;
    }

    .layui-form-item .layui-form-label {
        text-overflow: clip;
    }

    .input-code {
        width: 55%;
        display: inline;
    }

    #send_phone {
        padding: 0;
        width: 35%;
        float: right;
        margin-right: 15px;
        font-size: 12px;
    }

    .footer {
        text-align: center;
        font-size: 12px;
        color: #666666;
        position: fixed;
        bottom: 0;
        width: 100%;
    }



    .footer p {
        margin: 5px 0;
    }

    .layui-elem-quote {
        text-align: center;
        border-left: none;
    }

    .layui-form-radio>i:hover,
    .layui-form-radioed>i {
        color: #275DA4;
    }


    .layui-btn {
        background-color: #275DA4;
        box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.2);
    }

    textarea {
        border: 1px solid #E9F1FB;
        resize: none;
        background: #E9F1FB;
        box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.2);
    }

    .all {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.4);
        display: none;
    }

    .tankuang {
        background: #fff;
        width: 300px;
        height: 290px;
        position: fixed;
        top: 50%;
        margin-top: -150px;
        left: 50%;
        margin-left: -150px;
        border-radius: 10px;
        padding-top: 10px;
    }

    .tankuang .one_btn {
        width: 200px;
        margin-left: 50px;
        background: #fff;
        margin-bottom: 30px;
        margin-top: 30px;
    }

    .tishi {
        text-align: center;
        color: #666;
        font-size: 14px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .layui-form-label {
        padding: 9px 9px 9px 0;
    }

    .layui-input-block {
        margin-left: 91px;
    }

    #launch-btn {
        width: 240px;
        padding-left: 60px;
        background: #fff;
    }

    .b {
        background-color: #cbcbcb;
    }
</style>

<body>

    <blockquote class="layui-elem-quote layui-text">
        来访出入登记
    </blockquote>

    <form class="layui-form" action="">
        <input type="hidden" name="wxcode" value="" id="wxcode" />
        <input type="hidden" name="rukouName" value="" id="enter" />

        <div style="text-align: center;height: 40px;line-height: 30px;">
            <div style="font-weight: bolder;font-size: 16px;color: #999;" class="title_">县委/县政府大院</div>
        </div>

        <div class="layui-form-item layui-form-name">
            <label class="layui-form-label">姓名*</label>
            <div class="layui-input-block">
                <input type="text" name="name" lay-verify="required" lay-reqtext="请输入真实姓名" autocomplete="off"
                    placeholder="请输入姓名" class="layui-input layui_name" maxlength="4">
            </div>
        </div>
        <div class="layui-form-item layui-form-idCard">
            <label class="layui-form-label">身份证号码*</label>
            <div class="layui-input-block">
                <input type="text" name=" idCard" lay-verify="identity" placeholder="请输入身份证号码" autocomplete="off"
                    class="layui-input layui_idCard" maxlength="18">
            </div>
        </div>
        <div class="layui-form-item layui-form-phone">
            <label class="layui-form-label">手机号*</label>
            <div class="layui-input-block">
                <input type="text" name="phone" id="L_phone" lay-verify="phone" lay-reqtext="请输入手机号"
                    placeholder="请输入手机号" autocomplete="off" class="layui-input layui_phone" maxlength="11">
            </div>
        </div>
        <div class="layui-form-item layui-form-code">
            <div class="layui-input-block">
                <input type="text" name="code" lay-verify="code" lay-reqtext="请输入验证码" placeholder="请输入验证码"
                    autocomplete="off" class="layui-input input-code" maxlength="4">
                <button type="button" class="layui-btn" id="send_phone">
                    获取验证码
                </button>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">来源单位</label>
            <div class="layui-input-block">
                <input type="radio" lay-filter="danwei" name="danwei" value="1" title="有" checked="">
                <input type="radio" lay-filter="danwei" name="danwei" value="0" title="无">
            </div>
        </div>
        <div class="layui-form-item identity_name">
            <label class="layui-form-label">单位名称*</label>
            <div class="layui-input-block">
                <input type="text" name="danweiName" lay-verify="required2" placeholder="请输入单位名称" autocomplete="off"
                    class="layui-input danweiName" maxlength="10">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">事由*</label>
            <div class="layui-input-block">
                <textarea id="vod_content" name="reason" type="text/plain"
                    style="width:90%;height:60px;padding: 2px 8px;" placeholder="请输入事由" lay-verify="required"
                    lay-reqtext="请输入事由" maxlength="30"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">体温*</label>
            <div class="layui-input-block">
                <input type="number" name="temperature" lay-verify="number" lay-reqtext="请输入今日体温" placeholder="请输入今日体温"
                    autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">陪同人员</label>
            <div class="layui-input-block">
                <textarea id="vod_content" name="remarks" type="text/plain"
                    style="width:90%;height:60px;padding: 2px 4px;" placeholder="老人或儿童" maxlength="20"></textarea>
            </div>
        </div>

        <div class="layui-form-item" style="text-align: center;">
            <button type="submit" class="layui-btn layui-date" lay-submit="" lay-filter="demo1"
                style="width: 200px;"></button>
        </div>
        <img src="http://hesuan.city1000.cn/images/tishi.png" alt="" width="90%"
            style="margin-left: 4%;margin-top: 20px;">
        <div class="tishi">技术支持: 智慧安平</div>
        <!-- 弹框 -->
        <div class="all">
            <div class="tankuang">
                <img src="http://hesuan.city1000.cn/register/images/code.png?v=02" alt="" class="one_btn">
                <wx-open-launch-weapp id="launch-btn" username="gh_21c954017d6d">
                    <template>
                        <style>
                            .two_btn {
                                width: 180px;
                              height:40px;
                              background:#275DA4;
                              line-height:40px;
                              text-align:center;
                              color:#fff
                            }
                        </style>
                        <!-- 路径必须是绝对路径 -->
                      <div class="two_btn">打开健康码</div>
                    </template>
                </wx-open-launch-weapp>
            </div>
        </div>
    </form>

    <script src="./layui/layui.js" charset="utf-8"></script>
    <script src="./jquery/jquery.min.js"></script>

    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的http://hesuan.city1000.cn/register.html?code=091E3t0009e5ZK1V2u000ShQDC0E3t0q -->
    <script>
        // 获取当前时间
        setInterval(time, 60000)

        function time() {
            var date = new Date()
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            var day = date.getDate()
            var hour = date.getHours()
            var minute = date.getMinutes()
            if (hour < 10) {
                hour = "0" + hour
            }
            if (minute < 10) {
                minute = "0" + minute
            }
            console.log(year, month, day)
            $(".layui-date").html(year + '-' + month + '-' + day + " " + hour + ":" + minute + '  登记')
        }
        time()

        layui.use(['form', 'layer', 'jquery'], function () {
            var form = layui.form,
                layer = layui.layer,
                $ = layui.jquery;
            var state = getQueryVariable('state');
            $(document).ready(function () {
                //页面一进入拿code 
                var code = getQueryVariable('code');
                // 把code放到隐藏的框里,一起提交
                $('#wxcode').val(code);
                // alert(state)
                var rukouName = ""
                var status = ""
                if (state.indexOf('-')) {
                    rukouName = state.substring(0, state.indexOf('-'))
                    status = state.substring(state.indexOf('-') + 1)
                    if (status == 1) {
                        // 未注册
                    } else if (status == 0) {
                        // 注册过(姓名身份证号手机号验证码都不显示)
                        $('.layui-form-name').hide();
                        $('.layui-form-idCard').hide();
                        $('.layui-form-phone').hide();
                        $('.layui-form-code').hide();
                        $('.input-code').val("alreadyhave");
                        $(".layui_name").attr("lay-verify", "")
                        $(".layui_idCard").attr("lay-verify", "")
                        $(".layui_phone").attr("lay-verify", "")
                        $(".input_code").attr("lay-verify", "")
                    }
                }
                $.ajax({
                    url: "http://47.92.216.207:8899/ymtRukou/query",
                    type: "get",
                    data: {
                        id: rukouName
                    },
                    success: function (res) {
                        console.log(res)
                        // 请求成功
                        if (res.code == 0) {
                            //alert(res.data.name)
                            // 从哪个口进来的显示在页面上
                            $(".title_").html(res.data.name)
                            $("#enter").val(res.data.name)
                        } else {
                            alert("error:" + res.msg)
                        }
                    },
                    error: function (err) {
                        alert("请求出错")
                    }
                })
            });
            //自定义验证规则
            form.verify({
                phone: [/^1[3456789]\d{9}$/, "请输入正确的手机号"],
                identity: [/(^\d{15}$)|(^\d{17}(x|X|\d)$)/, "请输入正确的身份证号"],
                required2: function (value) {
                    var danwei = $('input[name="danwei"]:checked').val();
                    if (danwei == 1) {
                        var reg = /[\S]+/;
                        if (!reg.test(value)) {
                            return '请输入单位名称';
                        }
                    }
                },
                // code: function (value) {
                //     if (!value || isNaN(value)) return "请填写正确的验证码"
                // }
            });
            //锁
            var codeStatus = true;
            //发送验证码
            $('#send_phone').on('click', function () {
                var phone = $('#L_phone').val();
                var reg = /^1[3456789]\d{9}$/;
                if (!reg.test(phone)) {
                    layer.msg('请输入正确的手机号', {
                        icon: 2
                    });
                    return false;
                }
                if (codeStatus) {
                    $.post('http://47.92.216.207:8899/api/hsVerificationCode', {
                        phone: phone
                    }, function (res) {
                        console.log(res.code)
                        //请求成功
                        if (res.code == 0) {
                            codeStatus = false;
                            // console.log('111')
                            var setTime;
                            var time = 60;
                            setTime = setInterval(function () {
                                if (time == 0) {
                                    clearInterval(setTime);
                                    codeStatus = true;
                                    $("#send_phone").removeClass("b");
                                    $("#send_phone").text("获取验证码");
                                    return;
                                } else {
                                    $("#send_phone").addClass("b");
                                    $("#send_phone").text(time + "s后重新获取");
                                }
                                time--;
                            }, 1000);
                        } else {
                            layer.msg(res.msg, {
                                icon: 2
                            });
                        }
                    })
                }
            })
            //监听单选框
            form.on('radio(danwei)', function (data) {
                console.log(data); //打印当前选择的信息
                if (data.value == 1) {
                    $('.identity_name').show();
                } else {
                    $('.identity_name').hide();
                }
                form.render();
            });
            //监听提交
            form.on('submit(demo1)', function (data) {
                console.log(data)
                var loadIndex;
                $.ajax({
                    url: 'http://47.92.216.207:8899/ymtUserZhengfu/insert',
                    data: data.field,
                    beforeSend: function () {
                        // 点击后阴影效果
                        loadIndex = layer.load(1, {
                            shade: [0.3, 'rgb(0, 0, 0)']
                        })
                    },
                    success: function (res) {
                        // 成功
                        if (res.code == 0) {
                            layer.msg('登记成功!!!', {
                                icon: 1,
                                time: 1
                            }, function () {
                                // 跳转到提交成功页面(防止页面滑动)
                                document.body.scrollTop = 0;
                                document.documentElement.scrollTop = 0;
                                document.body.style.height = "100%"
                                document.body.style.overflow = "hidden"
                                $(".all").css("display", "block")
                                $.ajax({
                                    type: "get",
                                    url: "http://user.city1000.top/wechat/wxScan", //自己填写请求地址
                                    data: {
                                        url: window.location.href
                                    },
                                    success: function (result) {
                                        //console.log(result)
                                        wx.config({
                                            // 开启调试模式,调用的所有api的返回值会在客户端//alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                                            debug: false,
                                            // 必填，公众号的唯一标识
                                            appId: result.appId,
                                            // 必填，生成签名的时间戳
                                            timestamp: "" +
                                                result
                                                .timestamp,
                                            // 必填，生成签名的随机串timestamp
                                            nonceStr: result
                                                .nonceStr,
                                            // 必填，签名，见附录1
                                            signature: result
                                                .signature,
                                            // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                                            jsApiList: [
                                                'checkJsApi',
                                                'scanQRCode'
                                            ],
                                            openTagList: [
                                                'wx-open-launch-weapp'
                                            ]
                                        });
                                        wx.error(function (res) {
                                            alert("出错了：" + res
                                                .errMsg
                                                ); //这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
                                        });
                                        ////alert("result" + result)
                                        var btn = document
                                            .getElementById(
                                                'launch-btn');
                                        ////alert('btn按鈕:'+btn)

                                        btn.addEventListener('launch',
                                            function (e) {
                                                // 成功跳转到河北健康码小程序
                                                //alert("成功跳转到河北健康码小程序")
                                            });
                                        btn.addEventListener('error',
                                            function (e) {
                                                ////alert('fail', e.detail);
                                            });
                                    }
                                })
                            });
                        } else {
                            //alert("是")
                            // 失败
                            //alert("要传递的数据"+state)
                            layer.msg(res.msg, {
                                icon: 2,
                            }, function () {
                                // alert()
                                location.href = "http://user.city1000.cn:9999/weixin/wechat/h5/redirectSomeWhere?url=http://hesuan.city1000.cn/register/organ.html&data="+state
                            });
                        }
                    },
                    error: function () {
                        layer.msg('系统维护更新中，请稍后...', {
                            icon: 2
                        });
                    },
                    complete: function () {
                        layer.close(loadIndex);
                    }
                });
                return false;
            });
        });
        // 获取code
        function getQueryVariable(variable) {
            // 参数 window.location.search
            var query = decodeURI(window.location.search.substring(1));
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) {
                    return pair[1];
                }
            }
            return (false);
        }
    </script>

</body>

</html>